<template>
  <div class='navbar-wrap'>
    <div class="navbar">
      <!-- <div class="nav-item" v-for="item in iconNavList">
        <div class="icon-wrap">
          <img :src="item" class="nav-icon">
        </div>
      </div> -->
      <div :class="['nav-item', item.path === currentRoute ? 'nav-checked' : '']" v-for="item, index in routerList">
        <div class="icon-wrap" @click="pageJump(item.path)">
          <!-- <img :src="getImgUrl(`../../assets/images/home/icon-nav${index}.png`)" class="nav-icon"> -->
          <div class="icon-box"><img :src="iconNavList[index]" class="nav-icon"></div>
          <div class="nav-text">{{ item.name }}</div>
        </div>
      </div>
      <div class="nav-back" @click="router.back();">
        <img src="@/assets/images/home/back-home.png" class="nav-icon">
      </div>
    </div>
  </div>
</template>
 
<script setup>
import { useTools } from '@/hooks/tools.js'
const { getImgUrl } = useTools();
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter();

import iconNav0 from "../assets/images/home/icon-nav0.png";
import iconNav1 from "../assets/images/home/icon-nav1.png";
import iconNav2 from "../assets/images/home/icon-nav2.png";
import iconNav3 from "../assets/images/home/icon-nav3.png";
import iconNav4 from "../assets/images/home/icon-nav4.png";
import iconNav5 from "../assets/images/home/icon-nav5.png";
import iconNav6 from "../assets/images/home/icon-nav6.png";
const iconNavList = ref([iconNav0, iconNav1, iconNav2, iconNav3, iconNav4, iconNav5, iconNav6]);
const pageJump = function (routerPath) {
  router.push({ path: routerPath });
};

// 数据声明↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
const currentRoute = ref(undefined); // 当前路由对象
const routerList = ref([{
  name: '首页 ',
  path: '/'
}, {
  name: '业务布局',
  path: '/business'
}, {
  name: '营销文案',
  path: '/marketingWriting'
}, {
  name: '咨询服务',
  path: '/advisoryService'
}, {
  name: 'NFT全案',
  path: '/nftCase'
}, {
  name: '融媒体矩阵',
  path: '/convergenceMedia'
}, {
  name: '社群代运营 ',
  path: '/association'
}]);

watch(() => router.currentRoute.value.path, (newVal, oldVal) => {
  currentRoute.value = newVal;
})
</script>
 
<style lang='scss' scoped>
.navbar-wrap {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: center;

  .navbar {
    box-sizing: border-box;
    padding-top: 60px;
    width: 112px;
    height: 820px;
    background: linear-gradient(180deg, rgba(45, 57, 125, 0.8) 0%, rgba(52, 106, 156, 0.8) 91%);
    border-radius: 24px;
    position: sticky;
    top: 75px;
    left: 27px;
    display: flex;
    flex-direction: column;
  }

  .nav-item {
    width: 100%;
    height: 60px;
    transition: background 0.5s;
    cursor: pointer;
    position: relative;
    margin-bottom: 20px;


    .icon-wrap {
      height: 100%;
      overflow: hidden;

      .icon-box {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .4s;

        .nav-icon {
          transition: filter 0.5s;
          width: 36px;
          object-fit: contain;
          filter: grayscale(1);
        }
      }

      .nav-text {
        text-align: center;
        transition: all .4s;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 14px;
      }
    }

    &::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      // transform: translateY(-50%);
      width: 4px;
      height: 0;
      background: #70F7F9;
      transition: height ease-out .3s;
    }

    
  }

  // 选中状态的nav
  .nav-checked, .nav-item:hover {
      background: rgba(58, 73, 155, 0.85);

      &::before {
        height: 60px;
      }

      .icon-wrap {

        .icon-box,
        .nav-text {
          transform: translateY(-100%);
        }

        .nav-icon {
          filter: none;
        }
      }
    }

  .nav-back {
    margin-top: auto;
    width: 100%;
    height: 80px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    .nav-icon {
      width: 36px;
    }
  }
}
</style>